<template>
    <div class="box">
        <div class="title">《信息技术》评价系统—子任务4评价分析</div>
        <div class="box1">
            <div class="sortData">
                <h1 style="margin-left: 18px;">总分评价</h1>
                <el-row v-for="item in sortDataList" :key="item">
                    <el-col :span="7" style="text-align: center;margin-top: 8px;">{{ item.name }}</el-col>
                    <el-col :span="8">
                        <el-tag size="large" round style="font-size: 15px;">{{ item.value }}</el-tag>
                    </el-col>

                    <div v-if="item.value == 92.8" style="
                    position: absolute;right: 0.1px;top:-6px;
                    color: red;font-weight: 600;font-size: 30px;">No.1</div>



                    <el-divider border-style="dotted" style="margin: 8px 0 0 0;" />
                </el-row>
            </div>
            <div class="chart0" id="chart0"></div>
            <div class="count">
                <h1>评价提交人数</h1>
                <div>35/35</div>
            </div>
        </div>
        <div class="box2">
            <div class="chart1">
                <div class="title">AI工具应用</div>
                <div style=" height: 500px;" id="chart1"></div>
            </div>
            <div class="chart2">
                <div class="title">任务成效</div>
                <div style=" height: 500px;" id="chart2"></div>
            </div>
            <div class="chart3">
                <div class="title">特色创新</div>
                <div style=" height: 500px;" id="chart3"></div>
            </div>
            <div class="chart4">
                <div class="title">职业素养</div>
                <div style=" height: 500px;" id="chart4"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const sortDataList = ref([
    // +1.2
    { name: '知行组', value: 85.3 },
    { name: '好学组', value: 84.9 },
    //+2
    { name: '善学组', value: 92.8 },
    //-1.2
    { name: '崇学组', value: 83.1},
    { name: '思行组', value: 88.1 },
    { name: '力行组', value: 84.4 },
])

onMounted(() => {
    for (let i = 0; i < 4; i++) {
        const domMap = document.getElementById('chart' + (i + 1));
        // 清除Echarts默认添加的属性
        domMap.removeAttribute("_echarts_instance_");
    }
    getCharts0()
    getCharts1()
    getCharts2()
    getCharts3()
    getCharts4()

})

const getCharts0 = () => {
    const charts0 = echarts.init(document.getElementById('chart0'));
    const option = {
        title: {
            text: '分项统计',
            textStyle: {
                color: 'white',
            },
            top: 10,
            left: 10
        },
        tooltip: {},
        legend: {
            data: [
                { name: 'AI工具应用', icon: 'circle' },
                { name: '任务成效', icon: 'circle' },
                { name: '特色创新', icon: 'circle' },
                { name: '职业素养', icon: 'circle' }
            ],
            bottom: 7,
            textStyle: {
                fontWeight: "bold",
                color: 'white'
            },
        },
        radar: {
            // shape: 'circle',
            indicator: [
                { name: '知行组', max: 25 },
                { name: '好学组', max: 25 },
                { name: '善学组', max: 25 },
                { name: '崇学组', max: 25 },
                { name: '思行组', max: 25 },
                { name: '力行组', max: 25 }
            ]
        },
        series: [{
            type: 'radar',
            data: [
                {
                    value: [18.7, 16.3, 24.7, 18.9, 20.3, 19.8], name: 'AI工具应用',
                    lineStyle: {
                        color: '#03ede6'
                    },
                    itemStyle: {
                        color: '#03ede6'
                    }
                },
                {
                    value: [22.1, 21.9, 23.3, 23.5, 24.1, 23.4], name: '任务成效',
                    lineStyle: {
                        color: '#f00'
                    },
                    itemStyle: {
                        color: '#f00'
                    }
                },
                {
                    value: [20.3, 20.4, 22.1, 21.2, 20.0, 21.0], name: '特色创新',
                    lineStyle: {
                        color: '#0f0'
                    },
                    itemStyle: {
                        color: '#0f0'
                    }
                },
                {
                    value: [22.2, 21.9, 23.1, 22.9, 23.7, 24.5], name: '职业素养',
                    lineStyle: {
                        color: '#fff'
                    },
                    itemStyle: {
                        color: '#fff'
                    }
                }
            ]
        }]
    };
    charts0.setOption(option)

}

const getCharts1 = () => {
    let chart = null;
    if (chart)
        console.log(456456465, chart)
    chart = echarts.init(document.getElementById('chart1'));

    const option = {
        title: {
            text: "AI工具应用评定",
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 26,
                color: 'white'
            },
        },
        tooltip: {},
        xAxis: [{
            data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        }],
        yAxis: {
            max: 30,
            min: 15,
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },
        series: [
            {
                name: "分数",
                type: "bar",
                data: [24.7, 29.7, 26.3, 27.9, 21.3, 23.8],
                colorBy: 'data'
            },
        ],
    };

    chart.setOption(option)
}

const getCharts2 = () => {
    const chart = echarts.init(document.getElementById('chart2'));
    const option = {
        title: {
            text: "任务成效评定",
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 26,
                color: 'white'
            },
        },
        tooltip: {},

        xAxis: {
            max: 30,
            min: 10,
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },
        yAxis: {
            data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },
        series: [
            {
                name: "分数",
                type: "bar",
                data: [26.1, 24.9, 28.3, 21.5, 29.1, 23.4],
                colorBy: 'data',
            },
        ],
    };

    chart.setOption(option)
}

const getCharts3 = () => {
    const chart = echarts.init(document.getElementById('chart3'));
    var option = {
        title: {
            text: "特色创新评定",
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 26,
                color: 'white'
            },
        },
        tooltip: {},
        legend: {
            data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
            bottom: 20,
            textStyle: {
                fontWeight: "bold",
                color: 'white'
            },
        },
        xAxis: {
            max: 20,
            min: 10,
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },
        yAxis: {
            data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },

        series: [
            {
                type: "bar",
                data: [
                { value: 16.3, name: "知行组", },
                { value: 17.4, name: "好学组", },
                { value: 19.1, name: "善学组", },
                { value: 14.8, name: "崇学组", },
                { value: 18.2, name: "思行组", },
                { value: 17.0, name: "力行组", }
                ],
                colorBy: 'data',
            },
        ],
    };

    chart.setOption(option)
}

const getCharts4 = () => {
    const chart = echarts.init(document.getElementById('chart4'));
    const option = {
        title: {
            text: "职业素养评定",
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 26,
                color: 'white'
            },
        },
        tooltip: {},
        xAxis: [{
            data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        }],
        yAxis: {
            max: 20,
            min: 15,
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },
        series: [
            {
                name: "分数",
                type: "line",
                data: [17.2,16.9,18.1,17.9,18.5,19.2],
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(84, 112, 198,0.8)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(129, 66, 158,0.3)'
                        }
                    ])
                }
            },
        ],
    };

    chart.setOption(option)
}

</script>

<style scoped lang="scss">
.box {
    width: 100%;
    height: 100%;
    background-color: #2d4351;
    color: rgb(255, 255, 255);

    .box1 {
        height: 480px;
        display: flex;
        flex-direction: row;
        margin: 35px 0;

        &>div {
            width: 30%;
            margin: 10px;
            background-color: #324374;
            box-shadow: 0 0 10px rgb(34, 31, 38)
        }

        .sortData {
            .el-row {
                display: flex;
                justify-content: space-between;
                margin: 18px 0;
            }
        }

        .count {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            h1 {
                position: absolute;
                top: 5%;
                font-size: 35px;

            }

            div {
                font-size: 60px;
                padding: 10px;
            }
        }
    }

    .box2 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;

        &>div {
            margin: 10px;
            background-color: #324374;
            width: 850px;
            box-shadow: 0 0 10px rgb(34, 31, 38);
        }



    }

}

.title {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    background-color: rgb(129, 66, 158);
    border-radius: 10px;
    margin: 10px auto;
    padding: 10px;
}
</style>